<template>
  <div ref="boxwrap" class="moudel-chart PersonnelAnalysis">
    <div :id="id" :width="chartStyle.width" :height="chartStyle.height" class="chart" />
  </div>
</template>

<script>
import resize from '@/components/Charts/mixins/resize'
export default ({
  name: 'PersonnelAnalysis',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '150px'
    },
    height: {
      type: String,
      default: '150px'
    },
    isresize: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: 'PersonnelAnalysis',
      chart: null,
      chartStyle: {
        width: '100%',
        height: '100%'
      },
      currentView: {},
      fontColor: '#bebebe',
      color: ['rgba(46,199,201,1)', 'rgba(255,185,128,1)'],
      colorArr: []
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'regionid',
  //     'lineId'
  //   ])
  // },
  watch: {
    width: {
      immediate: true,
      handler: function(newval, oldval) {
        this.width = newval
      },
      deep: true
    },
    height: {
      immediate: true,
      handler: function(newval, oldval) {
        this.height = newval
      },
      deep: true
    },
    isresize(newval, oldval) {
      this.movement = newval
      this.chart.resize()
    }
  },
  mounted() {
    this.getDomHeight()
    this.domResize()
    this.getCurrentView()
  },
  created() {
    // this.getCurrentView()
  },
  methods: {
    getDomHeight() {
      this.chartStyle = {
        width: this.$refs.boxwrap.clientWidth + 'px',
        height: this.$refs.boxwrap.clientHeight + 'px'
      }
    },
    domResize() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        var width = element.clientWidth + 'px'
        var height = element.clientHeight + 'px'
        that.chartStyle = {
          width,
          height
        }
      })
    },
    getCurrentView() {
      this.currentView = {
        regionid: this.$Cookies.get('currentReginid'),
        lineId: this.$Cookies.get('currentLineId')
      }
      this.getData()
    },
    getData() {
      this.colourList()
      this.initChart()
    },
    colourList() {
      this.color.forEach(element => {
        const arr = element.split(',')
        arr.pop()
        this.colorArr.push({
          color: element,
          dark: arr.join(',') + ',.8)',
          light: arr.join(',') + ',.5)'
        })
      })
    },
    initChart() {
      const peopleObj = {
        '应到': 10,
        '实到': 8
      }
      const tempList = [
        { name: '应到', data: [2, 4, 3, 1] },
        { name: '实到', data: [2, 3, 2, 1] }
      ]
      const series = []
      const barWidth = 25
      const barGap = 0 // barGap = 0 => num = 50 ; barGap = 50 => num = 25
      const num = 50
      const initVal = 0 - num * 1
      tempList.forEach((item, index) => {
        const offset = initVal + num * 2 * index + '%'
        if (index === 0) {
          series.push(
            {
              z: index + 1,
              name: item.name,
              nameTextStyle: {
                color: this.fontColor
              },
              type: 'bar',
              barWidth: barWidth,
              barGap: 0 - barGap + '%',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0, x2: 1, y: 0, y2: 0,
                  colorStops: [
                    { offset: 0, color: this.colorArr[index].dark },
                    { offset: 0.5, color: this.colorArr[index].dark },
                    { offset: 0.5, color: this.colorArr[index].light },
                    { offset: 1, color: this.colorArr[index].light }
                  ]
                }
              },
              label: {
                show: true,
                position: [barWidth / 2, -(barWidth)],
                color: this.fontColor,
                fontSize: 14,
                fontStyle: 'bold',
                align: 'center'
              },
              data: item.data
            },
            {
            // name: seriesList[i].name +'顶',
              z: index + 1,
              type: 'pictorialBar',
              symbolPosition: 'end',
              data: item.data,
              symbol: 'diamond',
              symbolOffset: [offset, '-50%'], // A ['-50%', '-50%']  B ['50%', '-50%']
              symbolSize: [barWidth, barWidth / 3 * 2],
              itemStyle: {
                borderColor: this.colorArr[index].color,
                color: this.colorArr[index].color
              },
              tooltip: {
                show: false
              }
            }
          )
        } else {
          series.push(
            {
              z: index + 1,
              name: item.name,
              nameTextStyle: {
                color: this.fontColor
              },
              type: 'bar',
              barWidth: barWidth,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0, x2: 1, y: 0, y2: 0,
                  colorStops: [
                    { offset: 0, color: this.colorArr[index].dark },
                    { offset: 0.5, color: this.colorArr[index].dark },
                    { offset: 0.5, color: this.colorArr[index].light },
                    { offset: 1, color: this.colorArr[index].light }
                  ]
                }
              },
              label: {
                show: true,
                position: [barWidth / 2, -(barWidth)],
                color: this.fontColor,
                fontSize: 14,
                fontStyle: 'bold',
                align: 'center'
              },
              data: item.data
            },
            {
            // name: seriesList[i].name +'顶',
              z: index + 1,
              type: 'pictorialBar',
              symbolPosition: 'end',
              data: item.data,
              symbol: 'diamond',
              symbolOffset: [offset, '-50%'], // A ['-50%', '-50%']  B ['50%', '-50%']
              symbolSize: [barWidth, barWidth / 3 * 2],
              itemStyle: {
                borderColor: this.colorArr[index].color,
                color: this.colorArr[index].color
              },
              tooltip: {
                show: false
              }
            }
          )
        }
      })
      this.chart = this.$echarts.init(document.getElementById(this.id), 'jyt-dark')
      this.chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          right: 10,
          data: ['应到', '实到'],
          formatter: function(name) {
            return name + peopleObj[name] + '人'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['岗位1', '岗位2', '岗位3', '岗位4'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数',
            min: 0,
            max: 'dataMax',
            axisLabel: {
              show: true
            }
          }
        ],
        series
      })
    }
  }
})
</script>
<style lang="scss">
  .moudel-chart{
    width: 100%;
    height: 100%;
    > div {
          width: 100%;
    height: 100%;
    }
  }
</style>
